<!-- 笔记详情 -->
<template>
    <div class="box">
        <div class="top">
            <div class="back" @click="$router.back()">
                <svgIcon iconName="icon-fanhui" font-size="40px"></svgIcon>
            </div>
            <div class="user_pic" @click="goToUserCont">
                <img :src="userInfo.avatar_url || defaultAvatar" alt="">
            </div>
            <div class="user_name" @click="goToUserCont">
                {{ userInfo.nickname || '未设置昵称' }}
            </div>
            <div class="qt">
                <svgIcon icon-name="icon-gengduo" color="#000" font-size="40px"></svgIcon>
            </div>
        </div>
        <div class="cont_null"></div>
        <div class="cont_banner" @click="toggleVideoPlay">
            <!-- 视频类型 -->
            <video v-if="mediaType === 'video'" :src="mediaUrls[0]" controls autoplay loop preload="metadata" muted @click="toggleVideoPlay"></video>
            
            <!-- 图片类型 -->
            <template v-else-if="mediaType === 'image'">
                <van-swipe v-if="mediaUrls.length > 1"
                    class="my-swipe"
                    :show-indicators="true"
                    :autoplay="3000" 
                    :loop="true"
                    lazy-render
                    @change="(index) => activeIndex = index"        
                >
                    <van-swipe-item v-for="mediaUrl in mediaUrls" :key="mediaUrl">
                        <img :src="mediaUrl" alt="">
                    </van-swipe-item>
                    <template #indicator="{ active, total }">
                        <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
                    </template>
                </van-swipe>
                <img :src="mediaUrls[0]" v-else />
            </template>
            
            <div v-if="showHeart" class="double-click-heart">
                <svgIcon iconName="icon-aixin1" font-size="100px"></svgIcon>
            </div>
        </div>
        <div class="banner_btn" v-if="mediaType === 'image' && mediaUrls.length > 1">
                <div v-for="(_, index) in mediaUrls" 
                     :key="index" 
                     :class="['indicator-dot', { active: activeIndex === index }]"
                     @click="onClickDot(index)">
                </div>
        </div>
        <div class="cont_title" v-if="noteDetail.title">
            #{{ noteDetail.title }}
            <p v-if="noteDetail.description">
                {{ noteDetail.description }}
            </p>
        </div>
        <div class="cont_time" v-if="noteDetail.time_location">
            {{ formatTime(noteDetail.updated_at) }}
            <span class="location">{{ noteDetail.time_location.trim().slice(-2) }}</span>
        </div>
        <div class="cont_comment">
            <div class="comment_top">
                <div :class="[comment_active ? 'comment comment_active': 'comment']" @click="comment_active = !comment_active">
                    评论
                </div>
                <div :class="[comment_active ? 'zan': 'zan comment_active']" v-if="isCurrentUser" @click="comment_active = !comment_active">
                    赞与收藏
                </div>
            </div>
            <!-- 评论 -->
            <template v-if="comments.length > 0 && comment_active">
              <div class="comment_item" v-for="comment in comments" :key="comment.comment_id">  
                <div class="comment_pic">
                    <img :src="comment.userInfo?.avatar_url || defaultAvatar" alt="">
                </div>
                <div class="comment_font" @click="handleCommentClick(comment)">
                    {{ comment.userInfo?.nickname || '未设置昵称' }}
                    <span class="my_comment" v-if="comment.user_id === route.query.userId">
                        作者
                    </span>
                    <div>
                        {{ comment.content }}
                        <span class="time">
                            {{ formatTime(comment.time) }}
                        </span>
                    </div>
                </div>
                <div class="comment_zan" @click="handleCommentLike(comment)">
                    <svgIcon :iconName="comment.is_liked ? 'icon-aixin1': 'icon-aixin'" font-size="40px"></svgIcon>
                    <p style="font-size: 24px; text-align: center;">
                        {{ comment.likes?.length || 0 }}
                    </p>
                </div>
                <div class="hf_item" v-for="reply in comment.replies" :key="reply.reply_id">
                    <div class="hf_pic">
                        <img :src="reply.userInfo?.avatar_url || defaultAvatar" alt="">
                    </div>
                    <div class="hf_font" @click="handleReplyClick(reply)">
                        {{ reply.userInfo?.nickname || '未设置昵称' }}
                        <span class="my_hf" v-if="reply.user_id === route.query.userId">作者</span>
                        <div>
                            {{ reply.content }}
                            <span class="time">
                                {{ formatTime(reply.time) }}
                            </span>
                        </div>
                    </div>
                    <!-- <div class="hf_zan" @click="handleReplyLike(reply)">
                        <svgIcon :iconName="reply.is_liked ? 'icon-aixin1': 'icon-aixin'" font-size="40px"></svgIcon>
                        <p style="font-size: 24px; text-align: center;">
                            {{ reply.like_count || 0 }}
                        </p>
                    </div> -->
                </div>
              </div>
            </template>
            <!-- 无评论 -->
            <div class="wu_comment" v-else v-show="comment_active">
                <svgIcon iconName="icon-wupinglun" font-size="150px"></svgIcon>
                <p>这是一片荒草地！</p>
            </div>
            <!-- 赞与收藏 -->
            <template v-if="likesList && likesList.length > 0 && !comment_active">
              <div class="comment_item" v-for="like in likesList" :key="like.user_id + '_like'">
                <div class="comment_pic">
                    <img :src="like.user_avatar || defaultAvatar" alt="">
                </div>
                <div class="comment_font">
                    {{ like.user_nickname || '未设置昵称' }}
                    <div>
                        点赞了你的笔记
                        <span class="time">{{ formatTime_8(like.created_at) }}</span>
                    </div>
                </div>
              </div>
            </template>
            <template v-if="favoritesList && favoritesList.length > 0 && !comment_active">
              <div class="comment_item" v-for="favorite in favoritesList" :key="favorite.user_id + '_fav'">
                <div class="comment_pic">
                    <img :src="favorite.user_avatar || defaultAvatar" alt="">
                </div>
                <div class="comment_font">
                    {{ favorite.user_nickname || '未设置昵称' }}
                    <div>
                        收藏了你的笔记
                        <span class="time">{{ formatTime_8(favorite.created_at) }}</span>
                    </div>
                </div>
              </div>
            </template>
            <!-- 无点赞和收藏 -->
            <div class="wu_comment" v-else v-show="!comment_active">
                <svgIcon iconName="icon-wushoucang_" font-size="150px"></svgIcon>
                <p>暂无点赞和收藏！</p>
            </div>
        </div>
        <div class="bottom" @click="showPopup">
            <div class="input_btn">
                <svgIcon iconName="icon-bianji" font-size="40px"></svgIcon>
                <input type="text" placeholder="说点什么...">
            </div>
            <div class="zan_btn" @click.stop="handleDoubleClick">
                <svgIcon :iconName="isLiked ? 'icon-aixin1': 'icon-aixin'" font-size="40px"></svgIcon>
                {{ likesList.length || 0 }}
            </div>
            <div class="sc_btn" @click.stop="handleNoteFavorite">
                <svgIcon :iconName="isFavorited ? 'icon-star': 'icon-wujiaoxing1'" font-size="40px"></svgIcon>
                {{ favoritesList.length || 0 }}
            </div>
            <div class="pl_btn">
                <svgIcon iconName="icon-pinglun" font-size="40px"></svgIcon>
                {{ totalComments }}
            </div>
        </div>
        <van-popup v-model:show="show" position="bottom" round
        :style="{ height: '30%' }">
            <div class="pl_cont">
                <!-- <div class="aite">
                    <div class="aite_user">
                        <img src="../../assets/czq/pic.png" alt="">
                        <p>七月海岸</p>
                    </div>
                </div> -->
                <div class="input_btn2">
                    <textarea v-model="commentContent" placeholder="爱评论的人运气都不会差"></textarea>
                </div>
                <div class="pl_qt">
                    <div id="aite">
                        <svgIcon iconName="icon-aite" font-size="40px"></svgIcon>
                    </div>
                    <div>
                        <svgIcon iconName="icon-weixiao" font-size="40px"></svgIcon>
                    </div>
                    <div>
                        <svgIcon iconName="icon-tupian1" font-size="40px"></svgIcon>
                    </div>
                    <div>
                        <svgIcon iconName="icon-jiahao-yuan" font-size="40px"></svgIcon>
                    </div>
                    <div class="fs_btn" @click="sendComment">
                        发送
                    </div>
                </div>
            </div> 
        </van-popup>
        <!-- 评论操作弹窗 -->
        <van-popup v-model:show="showCommentAction" position="bottom" round>
            <div class="action-popup">
                <div class="action-item" @click="replyToComment">回复</div>
                <div class="action-item delete" v-if="hasDeletePermission(currentComment?.user_id)" @click="deleteComment">删除</div>
            </div>
        </van-popup>
        <!-- 回复操作弹窗 -->
        <van-popup v-model:show="showReplyAction" position="bottom" round>
            <div class="action-popup">
                <div class="action-item" @click="replyToReply">回复</div>
                <div class="action-item delete" v-if="hasDeletePermission(currentReply?.user_id)" @click="deleteReply">删除</div>
            </div>
        </van-popup>
    </div>
</template>

<script setup>
import { reactive, onMounted, ref, computed } from 'vue';
import { Swipe, SwipeItem, showToast } from 'vant';
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';
import defaultAvatar from '@/assets/czq/pic.png';

const route = useRoute();
const router = useRouter();
const activeIndex = ref(0);
const comment_active = ref(true);
const show = ref(false);
const showCommentAction = ref(false);
const showReplyAction = ref(false);
const currentComment = ref(null);
const currentReply = ref(null);
const isReplying = ref(false);
const mediaUrls = ref([]);
const noteDetail = ref({});
const userInfo = ref({});
const comments = ref([]);
const commentContent = ref('');
const likesList = ref([]);
const favoritesList = ref([]);
const showHeart = ref(false);
const mediaType = ref('');

// 添加计算属性
const isCurrentUser = computed(() => {
    return route.query.userId === localStorage.getItem('user_id');
});

// 检查当前用户是否点赞
const isLiked = computed(() => {
    const userId = localStorage.getItem('user_id');
    return likesList.value.some(like => like.user_id === userId);
});

// 检查当前用户是否收藏
const isFavorited = computed(() => {
    const userId = localStorage.getItem('user_id');
    return favoritesList.value.some(favorite => favorite.user_id === userId);
});

// 计算评论总数（包括评论和回复）
const totalComments = computed(() => {
    return comments.value.reduce((total, comment) => {
        return total + 1 + (comment.replies?.length || 0);
    }, 0);
});

// 获取用户信息
const fetchUserInfo = async (userId) => {
    try {
        const response = await axios.get(`http://1.14.98.17:8765/api/users/${userId}`);
        if (response.data.success) {
            if (userId === route.query.userId) {
                // 如果是顶部用户信息，直接设置到 userInfo
                userInfo.value = response.data.data;
            }
            return response.data.data;
        }
        return null;
    } catch (error) {
        console.error('获取用户信息出错:', error);
        return null;
    }
};

// 获取笔记详情
const fetchNoteDetail = async (noteId) => {
    try {
        const response = await axios.get(`http://1.14.98.17:8765/api/notes/${noteId}`);
        if (response.data.success) {
            noteDetail.value = response.data.data;
            console.log('获取到的笔记详情：', noteDetail.value);
        }
    } catch (error) {
        console.error('获取笔记详情出错:', error);
    }
};

// 获取笔记媒体数据
const fetchNoteMedia = async (noteId) => {
    try {
        const response = await axios.get(`http://1.14.98.17:8765/api/notes/${noteId}/media`);
        if (response.data.success) {
            const mediaData = response.data.data;
            mediaUrls.value = mediaData.map(media => media.media_url);
            
            // 获取媒体类型，如果有多个媒体，使用第一个的类型
            if (mediaData.length > 0) {
                mediaType.value = mediaData[0].media_type || 'image';
            } else {
                mediaType.value = 'image';
            }
            
            console.log('获取到的媒体数据：', mediaUrls.value);
            console.log('媒体类型：', mediaType.value);
        }
    } catch (error) {
        console.error('获取笔记媒体数据出错:', error);
        mediaType.value = 'image';
    }
};

// 获取评论回复
const fetchCommentReplies = async (commentId) => {
    try {
        const response = await axios.get(`http://1.14.98.17:8765/api/comments/${commentId}/replies`);
        if (response.data.success) {
            const replies = response.data.data;
            // 获取每个回复的用户信息
            const repliesWithUserInfo = await Promise.all(
                replies.map(async (reply) => {
                    const userInfo = await fetchUserInfo(reply.user_id);
                    return {
                        ...reply,
                        userInfo
                    };
                })
            );
            return repliesWithUserInfo;
        }
        return [];
    } catch (error) {
        console.error('获取评论回复出错:', error);
        return [];
    }
};

// 获取笔记评论
const fetchNoteComments = async (noteId) => {
    try {
        const response = await axios.get(`http://1.14.98.17:8765/api/notes/${noteId}/comments`);
        if (response.data.success) {
            const commentsData = response.data.data;
            // 获取每个评论的用户信息和回复
            const commentsWithDetails = await Promise.all(
                commentsData.map(async (comment) => {
                    const [userInfo, replies] = await Promise.all([
                        fetchUserInfo(comment.user_id),
                        fetchCommentReplies(comment.comment_id)
                    ]);
                    // 检查评论是否被当前用户点赞
                    const isLiked = comment.likes?.some(like => like.user_id === localStorage.getItem('user_id'));
                    return {
                        ...comment,
                        userInfo,
                        replies,
                        is_liked: isLiked || false
                    };
                })
            );
            comments.value = commentsWithDetails;
            console.log('获取到的评论数据：', comments.value);
        }
    } catch (error) {
        console.error('获取笔记评论出错:', error);
    }
};

// 处理评论点赞
const handleCommentLike = async (comment) => {
    try {
        const userId = localStorage.getItem('user_id');
        if (!userId) {
            showToast('请先登录');
            return;
        }

        const response = await axios.post(`http://1.14.98.17:8765/api/comments/${comment.comment_id}/like`, {
            user_id: userId
        });
        
        if (response.data.success) {
            comment.is_liked = !comment.is_liked;
            comment.like_count = comment.is_liked ? 
                (comment.like_count || 0) + 1 : 
                (comment.like_count || 1) - 1;
        }
    } catch (error) {
        console.error('点赞失败:', error);
        showToast('点赞失败');
    }
};

// 处理回复点赞
const handleReplyLike = (reply) => {
    reply.is_liked = !reply.is_liked;
    reply.like_count = reply.is_liked ? (reply.like_count || 0) + 1 : (reply.like_count || 1) - 1;
};

// 处理评论点击
const handleCommentClick = (comment) => {
    currentComment.value = comment;
    showCommentAction.value = true;
};

// 处理回复点击
const handleReplyClick = (reply) => {
    currentReply.value = reply;
    showReplyAction.value = true;
};

// 删除评论
const deleteComment = async () => {
    if (!currentComment.value?.comment_id) {
        console.error('评论ID不存在');
        return;
    }

    try {
        console.log('Attempting to delete comment:', currentComment.value.comment_id);
        const response = await axios.delete(`http://1.14.98.17:8765/api/comments/${currentComment.value.comment_id}`, {
            headers: {
                'Content-Type': 'application/json'
            }
        });
        
        if (response.data.success) {
            showCommentAction.value = false;
            // 重新获取评论列表
            await fetchNoteComments(route.query.noteId);
        } else {
            console.error('删除评论失败:', response.data.message || '未知错误');
        }
    } catch (error) {
        console.error('删除评论失败:', error.response?.data || error.message);
        // 显示错误提示
        if (error.response?.status === 500) {
            console.error('服务器内部错误，请稍后重试');
        }
        showCommentAction.value = false;
    }
};

// 删除回复
const deleteReply = async () => {
    if (!currentReply.value?.reply_id || !currentComment.value?.comment_id) {
        console.error('回复ID或评论ID不存在');
        return;
    }

    try {
        const response = await axios.delete(`http://1.14.98.17:8765/api/comments/${currentComment.value.comment_id}/replies/${currentReply.value.reply_id}`);
        if (response.data.success) {
            showReplyAction.value = false;
            // 重新获取评论列表
            await fetchNoteComments(route.query.noteId);
        }
    } catch (error) {
        console.error('删除回复失败:', error);
    }
};

// 发送评论或回复
const sendComment = async () => {
    if (!commentContent.value.trim()) {
        return;
    }

    try {
        if (isReplying.value) {
            // 发送回复
            const replyData = {
                content: commentContent.value,
                user_id: localStorage.getItem('user_id'),
                reply_id: uuidv4(),
                time: formatDateTime()
            };
            
            const response = await axios.post(
                `http://1.14.98.17:8765/api/comments/${currentComment.value.comment_id}/replies`, 
                replyData
            );
            
            if (response.data.success) {
                commentContent.value = '';
                show.value = false;
                isReplying.value = false;
                await fetchNoteComments(route.query.noteId);
            }
        } else {
            // 发送评论
            const commentData = {
                content: commentContent.value,
                user_id: localStorage.getItem('user_id'),
                note_id: route.query.noteId,
                time: formatDateTime(),
                comment_id: uuidv4()
            };
            
            const response = await axios.post('http://1.14.98.17:8765/api/comments', commentData);
            if (response.data.success) {
                commentContent.value = '';
                show.value = false;
                await fetchNoteComments(route.query.noteId);
            }
        }
    } catch (error) {
        console.error('发送失败:', error);
    }
};

// 回复评论
const replyToComment = () => {
    showCommentAction.value = false;
    show.value = true;
    isReplying.value = true;
    commentContent.value = '';
};

// 回复回复
const replyToReply = () => {
    showReplyAction.value = false;
    show.value = true;
    isReplying.value = true;
    commentContent.value = '';
};

// 点击底部输入框时重置状态
const showPopup = () => {
    show.value = true;
    isReplying.value = false;
    commentContent.value = '';
};

// 获取点赞用户列表
const fetchLikesList = async () => {
    try {
        const response = await axios.get(`http://1.14.98.17:8765/api/notes/${route.query.noteId}/likes`);
        if (response.data.success) {
            likesList.value = response.data.data;
        }
    } catch (error) {
        console.error('获取点赞列表失败:', error);
    }
};

// 获取收藏用户列表
const fetchFavoritesList = async () => {
    try {
        const response = await axios.get(`http://1.14.98.17:8765/api/notes/${route.query.noteId}/favorites`);
        if (response.data.success) {
            favoritesList.value = response.data.data;
        }
    } catch (error) {
        console.error('获取收藏列表失败:', error);
    }
};

onMounted(async () => {
    // 滚动到页面顶部
    window.scrollTo(0, 0);
    
    const noteId = route.query.noteId;
    const userId = route.query.userId;
    
    if (noteId) {
        await Promise.all([
            fetchNoteMedia(noteId),
            fetchNoteDetail(noteId),
            fetchNoteComments(noteId),
            fetchLikesList(),
            fetchFavoritesList()
        ]);
    }
    
    if (userId) {
        await fetchUserInfo(userId);
    }
    
    setTimeout(() => {
        const SwipeTrack = document.querySelector('.van-swipe__track');
        if (SwipeTrack) {
            SwipeTrack.style.alignItems = 'center';
        }
    }, 100);
});

// 时间计算器
const formatTime = (timeStr) => {
    if (!timeStr) return '';
    
    const now = new Date();
    const time = new Date(timeStr);
    
    // 检查时间是否有效
    if (isNaN(time.getTime())) {
        console.error('Invalid time string:', timeStr);
        return '';
    }
    
    const diff = now - time; // 时间差（毫秒）
    
    // 十分钟内
    if (diff < 10 * 60 * 1000) {
        return '刚刚';
    }
    
    // 24小时内
    if (diff < 24 * 60 * 60 * 1000) {
        const hours = Math.floor(diff / (60 * 60 * 1000));
        const minutes = Math.floor(diff / (60 * 1000));
        
        if (hours === 0) {
            return `${minutes}分钟前`;
        } else {
            return `${hours}小时前`;
        }
    }
    
    // 本年内
    if (time.getFullYear() === now.getFullYear()) {
        const month = String(time.getMonth() + 1).padStart(2, '0');
        const day = String(time.getDate()).padStart(2, '0');
        return `${month}-${day}`;
    }
    
    // 超过本年
    const year = time.getFullYear();
    const month = String(time.getMonth() + 1).padStart(2, '0');
    const day = String(time.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
};

// 时间计算器 需要加八小时的
const formatTime_8 = (timeStr) => {
    if (!timeStr) return '';
    
    const now = new Date();
    const time = new Date(timeStr);
    
    // 检查时间是否有效
    if (isNaN(time.getTime())) {
        console.error('Invalid time string:', timeStr);
        return '';
    }
    
    // 给时间加上8小时
    time.setHours(time.getHours() + 8);
    
    const diff = now - time; // 时间差（毫秒）
    
    // 十分钟内
    if (diff < 10 * 60 * 1000) {
        return '刚刚';
    }
    
    // 24小时内
    if (diff < 24 * 60 * 60 * 1000) {
        const hours = Math.floor(diff / (60 * 60 * 1000));
        const minutes = Math.floor(diff / (60 * 1000));
        
        if (hours === 0) {
            return `${minutes}分钟前`;
        } else {
            return `${hours}小时前`;
        }
    }
    
    // 本年内
    if (time.getFullYear() === now.getFullYear()) {
        const month = String(time.getMonth() + 1).padStart(2, '0');
        const day = String(time.getDate()).padStart(2, '0');
        return `${month}-${day}`;
    }
    
    // 超过本年
    const year = time.getFullYear();
    const month = String(time.getMonth() + 1).padStart(2, '0');
    const day = String(time.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
};

const onClickDot = (index) => {
    activeIndex.value = index;
}

// 格式化时间为指定格式
const formatDateTime = () => {
    const now = new Date();
    const year = now.getFullYear();
    const month = String(now.getMonth() + 1).padStart(2, '0');
    const day = String(now.getDate()).padStart(2, '0');
    const hours = String(now.getHours()).padStart(2, '0');
    const minutes = String(now.getMinutes()).padStart(2, '0');
    return `${year}-${month}-${day} ${hours}:${minutes}`;
};

// 检查是否有删除权限
const hasDeletePermission = (userId) => {
    const localUserId = localStorage.getItem('user_id');
    const routeUserId = route.query.userId;
    // 如果本地存储的user_id与路由的user_id相同，则可以删除所有评论
    // 否则只能删除自己的评论
    return localUserId === routeUserId || localUserId === userId;
};

// 添加笔记点赞和收藏的处理函数
const handleNoteLike = async () => {
    try {
        const userId = localStorage.getItem('user_id');
        if (!userId) {
            showToast('请先登录');
            return;
        }

        const response = await axios.post(`http://1.14.98.17:8765/api/notes/${route.query.noteId}/like`, {
            userId: userId
        });
        if (response.data.success) {
            await fetchLikesList(); // 重新获取点赞列表
        }
    } catch (error) {
        console.error('点赞失败:', error);
        showToast('点赞失败');
    }
};

const handleNoteFavorite = async () => {
    try {
        const userId = localStorage.getItem('user_id');
        if (!userId) {
            showToast('请先登录');
            return;
        }

        const response = await axios.post(`http://1.14.98.17:8765/api/notes/${route.query.noteId}/favorite`, {
            userId: userId
        });
        if (response.data.success) {
            await fetchFavoritesList(); // 重新获取收藏列表
        }
    } catch (error) {
        console.error('收藏失败:', error);
        showToast('收藏失败');
    }
};

const handleDoubleClick = async () => {
    showHeart.value = true;
    await handleNoteLike();
    setTimeout(() => {
        showHeart.value = false;
    }, 800);
};

const toggleVideoPlay = () => {
    const video = document.querySelector('video');
    if (video) {
        if (video.paused) {
            video.play();
        } else {
            video.pause();
        }
    }
};

const goToUserCont = () => {
    const userId = route.query.userId;
    if (userId) {
        router.push({
            path: '/usercont',
            query: {
                userId: userId
            }
        });
    }
};

// 兼容所有环境的UUID生成函数
function uuidv4() {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
    var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
    return v.toString(16);
  });
}
</script>

<style lang="less" scoped>
.box {
    width: 100%;
    // min-height: 100vh;
    background-color: #fff;
    .top {
      width: 100%;
      height: 100px;
      font-size: 32px;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 10;
      display: flex;
      align-items: center;
      background-color: #fff;
      .back {
        width: 100px;
        height: 100%;
        line-height: 100px;
        text-align: center;
      }
      .user_pic {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        overflow: hidden;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
      }
      .user_name {
        width: 450px;
        margin-left: 30px;
        line-height: 100px;
        font-size: 30px;
        position: relative;
        .add_user {
            width: 120px;
            height: 50px;
            border-radius: 30px;
            border: 1px solid red;
            text-align: center;
            line-height: 50px;
            font-size: 20px;
            color: red;
            position: absolute;
            top: 25px;
            right: 10px;
        }
      }
      .qt {
        width: 100px;
        height: 100%;
        line-height: 100px;
        text-align: center;
      }
    }
    .cont_null {
        width: 100%;
        height: 100px;
    }
    .cont_banner {
        width: 100%;
        position: relative;
        img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            max-height: 1100px;
            min-height: 500px;
        }
        video {
            width: 100%;
            height: auto;
            max-height: 1100px;
            min-height: 500px;
            object-fit: contain;
        }
        .van-swipe {
            width: 100%;
            .van-swipe-item {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .custom-indicator {
                position: absolute;
                top: 20px;
                right: 20px;
                padding: 5px 10px;
                color: #fff;
                font-size: 26px;
                border-radius: 20px;
                background-color: rgba(0, 0, 0, .5);
                z-index: 1000;
            }
        }
        .double-click-heart {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0);
            color: #fff;
            font-size: 100px;
            pointer-events: none;
            z-index: 1000;
            animation: heartBeat 0.8s ease-out;
        }
    }
    .banner_btn {
            width: 710px;
            height: 50px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            .indicator-dot {
                width: 12px;
                height: 12px;
                border-radius: 50%;
                background-color: rgba(23, 18, 18, 0.5);
                transition: all 0.3s;
                cursor: pointer;
                &.active {
                    width: 24px;
                    border-radius: 6px;
                    background-color: #f60;
                }
            }
    }
    .cont_title {
        width: 710px;
        margin: 0 auto;
        font-size: 32px;
        p {
            font-size: 28px;
        }
    }
    .cont_time {
        margin: 0 auto;
        width: 710px;
        height: 100px;
        font-size: 22px;
        line-height: 100px;
        border-bottom: 1px solid gray;
        display: flex;
        align-items: center;
        justify-content: space-between;
        
        .location {
            color: #666;
            font-size: 20px;
        }
    }
    .cont_comment {
        width: 710px;
        margin: 0 auto;
        min-height: 1600px;
        .wu_comment {
            margin-top: 100px;
            text-align: center;
        }
        .comment_top {
            width: 100%;
            height: 80px;
            display: flex;
            align-items: center;
            div {
                font-size: 32px;
                color: gray;
                margin-right: 40px;
            }
            .comment_active {
                color: #000;
            }
        }
        .comment_item {
            width: 100%;
            min-height: 90px;
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 30px;
            .comment_pic {
                width: 60px;
                height: 60px;
                border-radius: 50%;
                img {
                    width: 100%;
                    border-radius: 50%;
                    height: 100%;
                }
            }
            .comment_font {
                margin-left: 20px;
                width: 560px;
                font-size: 24px;
                color: gray;
                .my_comment {
                    margin-left: 10px;
                    padding: 7px 16px;
                    width: 70px;
                    height: 40px;
                    border-radius: 30px;
                    background-color: rgb(246, 219, 224);
                    color: red;
                    font-size: 20px;
                }
                div {
                    margin-top: 10px;
                    font-size: 28px;
                    color: #000;
                    .time {
                        font-size: 22px;
                        color: #999;
                        margin-left: 10px;
                    }
                }
            }
            .comment_zan {
                width: 50px;
                margin-left: 20px;
            }
            .hf_item {
                margin-top: 10px;
                width: 100%;
                min-height: 90px;
                display: flex;
                flex-wrap: wrap;
                padding-left: 80px;
                .hf_pic {
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                    img {
                        width: 100%;
                        border-radius: 50%;
                        height: 100%;
                    }
                }
                .hf_font {
                    margin-left: 20px;
                    width: 500px;
                    font-size: 22px;
                    color: gray;
                    .my_hf {
                        margin-left: 10px;
                        padding: 7px 16px;
                        width: 70px;
                        height: 40px;
                        border-radius: 30px;
                        background-color: rgb(246, 219, 224);
                        color: red;
                        font-size: 20px;
                    }
                    div {
                        margin-top: 10px;
                        font-size: 28px;
                        color: #000;
                        .time {
                            font-size: 22px;
                            color: #999;
                            margin-left: 10px;
                        }
                    }
                }
                .hf_zan {
                    width: 50px;
                    margin-left: 20px;
                }
            }
        }
    }
    .bottom {
        width: 100%;
        height: 110px;
        display: flex;
        align-items: center;
        position: fixed;
        left: 0;
        bottom: 0;
        padding: 0 20px;
        font-size: 28px;
        background-color: #fff;
        .input_btn {
            max-width: 400px;
            height: 70px;
            border-radius: 30px;
            background-color: #f5f5f5;
            display: flex;
            align-items: center;
            padding: 0 20px;
            margin-right: 20px;
            input {
                max-width: 300px;
                border: none;
                background: none;
                margin-left: 10px;
                font-size: 28px;
                &::placeholder {
                    color: #999;
                }
            }
        }
        .zan_btn, .sc_btn, .pl_btn {
            min-width: 100px;
            display: flex;
            align-items: center;
            cursor: pointer;
            font-size: 28px;
            gap: 5px;
        }
    }
    .pl_cont {
        width: 100%;
        .aite {
            width: 100%;
            height: 200px;
            display: flex;
            align-items: center;
            padding-left: 20px;
            overflow-x: auto;
            overflow-y: hidden;
            white-space: nowrap;
            -webkit-overflow-scrolling: touch;
            &::-webkit-scrollbar {
            display: none;
            }
            div {
                width: 140px;
                height: 140px;
                img {
                    width: 90px;
                    height: 90px;
                    border-radius: 50%;
                    
                }
                p {
                    margin-top: 10px;
                }
            }
        }
        .input_btn2 {
            width: 710px;
            min-height: 110px;
            border-radius: 30px;
            background-color: #f5f5f5;
            padding: 20px;
            margin: 0 auto;
            margin-top: 30px;
            textarea {
                width: 100%;
                height: 100%;
                border: none;
                background: none;
                resize: none;
                font-size: 28px;
                line-height: 1.5;
                &::placeholder {
                    color: #999;
                }
            }
        }
        .pl_qt {
            height: 100px;
            display: flex;
            align-items: center;
            padding: 0 20px;
            div {
                width: 90px;
                text-align: center;
            }
            .fs_btn {
                border-radius: 30px;
                width: 120px;
                height: 50px;
                background-color: red;
                font-size: 28px;
                color: #fff;
                text-align: center;
                line-height: 50px;
                margin-left: 300px;
            }
        }
    }
    .action-popup {
        padding: 20px;
        .action-item {
            height: 100px;
            line-height: 100px;
            text-align: center;
            font-size: 32px;
            border-bottom: 1px solid #eee;
            &:last-child {
                border-bottom: none;
            }
            &.delete {
                color: #ff4d4f;
            }
        }
    }
}

@keyframes heartBeat {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
}
</style>